<template>
  <div id="theA" style="width: 100%; height: 800px"></div>
</template>
<script>
// import { defineComponent } from '@vue/composition-api'
import * as echarts from "echarts";
import axios from "axios";
export default {
  name: "flask",
  data() {
    var data = {
      data_part: [], // 用this.data_part调用此变量
      // ,data_full: []
      coffee_data: [],
      coffee_checkData: [],
    };
    return data;
  },
  mounted() {
    this.getData();
    var that = this;
    // 此处setTimeout无效
    setTimeout(() => {this.rewriteData();}, 300);
    this.PicEchartA();
  },
  methods: {
    getData() {
      // var that = this;  //缓存组件指针

      // 实例化axios请求
      const requireB = axios.create({
        baseURL: "",
      });
      requireB({
        url: "/get",
      }).then((res) => {
        // console.log(res, "res", isNaN(res));
        var data_select = res["data"];
        // 填充必要数据
        for (var i in data_select) {
          var item = {
            title: data_select[i]["酒店"],
            deny: data_select[i]["酒店直销拒单率"],
            denyTime: data_select[i]["酒店直销拒单"],
          };
          // console.log(data_select[i]['酒店'])
          this.data_part.push(item);
        }
        console.log(this.data_part, "数据");
      });
      requireB({
        url: "/getb",
      }).then((res) => {
        console.log(res, "check datas", isNaN(res));
        var checkData = res["data"];
        for (var i = 0; i < checkData.length; i++) {
          var item = {
            cityname: checkData[i]["cityname"],
            times: checkData[i]["times"],
          };
          this.coffee_checkData.push(item);
        }
        console.log(this.coffee_checkData, "校准数据");
      });
      requireB({
        url: "/getc",
      }).then((res) => {
        console.log(res, "datas for use", isNaN(res));
        var dataTesting = res["data"];
        for (var i = 0; i < dataTesting.length; i++) {
          var item = {
            address: dataTesting[i]["address"],
            cityname: dataTesting[i]["cityname"],
            stars: dataTesting[i]["stars"],
            review_count: dataTesting[i]["review_count"],
          };
          this.coffee_data.push(item);
        }
        console.log(this.coffee_data, "原数据");
      });
    },
    rewriteData() {
      let repeat_city = [];
      let indexInfo = [];
      //整理含有多余数据的城市集
      for (let i in this.coffee_checkData) {
        // console.log(this.coffee_checkData[i], "coffee_data[i]");
        if (this.coffee_checkData[i]["times"] > 1) {
          // console.log(">1");
          repeat_city.push(this.coffee_checkData[i]["cityname"]);
        }
      }
      
      console.log(repeat_city);
      for (let city in repeat_city) {
        // console.log(repeat_city[city], "city");
        let repeat_data = [];
        for (let i in this.coffee_data) {
          // console.log(this.coffee_data[i], "coffee_data[i]");
          if (this.coffee_data[i]["cityname"] == repeat_city[city]) {
            repeat_data.push(this.coffee_data[i]["stars"]);}}
        indexInfo.push(repeat_data);
      }
      console.log(indexInfo);
      //对比数据
      for (let listIndex in indexInfo) {
        // console.log(listIndex,indexInfo[listIndex],'列表');
        var theMaxValue = Math.max.apply(null,indexInfo[listIndex]);
        // console.log(theMaxValue,'最大值');
        this.coffee_data = this.coffee_data.filter(
              (bar)=>{
                // console.log(bar);
                return bar['cityname'] != repeat_city[listIndex] || bar["stars"] == theMaxValue 
              }
            );
      }
      console.log(this.coffee_data,'咖啡馆数据');
    },
    PicEchartA() {
      var chartC = echarts.init(document.getElementById("theA"));
      console.log(this.data_part, "检验");
      var option = {
        title: {
          text: "双柱图",
          top: "3%",
          left: "center",
          textStyle: { fontSize: 18 },
        },
        legend: {},
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          // grid: [
          //   { bottom: 61, left: "center" },
          //   { height: 60, bottom: 0, left: "center" },
          // ],
          // position: function (pos, params, el, elRect, size) {
          //   var obj = { top: 10 };
          //   obj[["left", "right"][+(pos[0] < size.viewSize[0] / 2)]] = 30;
          //   return obj;
          // },
          extraCssText: "width: 300px", //个体信息框宽度
        },
        dataset: {
          source: this.data_part,
          // dimensions: ["title", "deny", "denyTimes"],
        },
        xAxis: {
          type: "category",
          name: "title",
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "bar",
            name: "deny",
          },
          {
            type: "bar",
            name: "denyTimes",
          },
        ],
      };

      var that = this; // 缓存指针

      // 延迟数毫秒后应用配置项
      setTimeout(function () {
        // console.log("set内", that.data_part, "this指向", this.data_part);
        if (isNaN(that.data_part)) {
          // console.log("set>if内", that.data_part, "this指向", this.data_part);

          chartC.setOption(option);
        } else {
        }
      }, 400);
    },
  },
};
</script>